<template>
    <div class="okumasan-order">
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID" @submit="confirmSubmit"
                    :action="action" :height="600">
        </ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 m-0 p-0 bg-white">
                <item-table title="Delivery Order List" :columns="defaultColumns" :total="total"  :data="data"
                            :loading="tableLoading" :page="page"  :batchButtons="batchButtons" @batch="batch" multipie
                            :pageSize="pageSize" @sort="sort" :model="model" isAdd isColumns @add="addItem"  isExport @export="exportExcel">
                    <template slot="order_cost" slot-scope="props">
                        <div>
                            {{ genFee(props.item.order_cost, props.item.order_currency) }}
                        </div>
                        <i class="ti-text text-info" @click="showTdDetail(props.item.room_title)"></i>
                    </template>
                    <template slot="order_delivered" slot-scope="props">
                        <span class="label label-primary" v-if="props.item.order_delivered">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>
                    <template slot="order_changed_after_delivery" slot-scope="props">
                        <span class="label label-primary" v-if="props.item.order_changed_after_delivery">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5"
                                @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5"
                                @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>

        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    import Modal from '@/components/widgets/Modal'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'
    // api
    import {addModel, searchModel} from "@/api/model";
    import {assignNextCheckinInfo, sendDeliveryOrder} from '@/api/okumasan'
    // config
    import config from '@/config'
    import {getAjaxConf} from '@/utils'

    let cleanerList = []
    searchModel('OkumasanCleaner',{search_keys:{}, page_size: 20000, order_by: 'okumasan_cleaner_name'}).then( res => {
        res.data.list.forEach(item => {
            cleanerList.push({label: item.okumasan_cleaner_name, value: item.id})
        })
    } )

    export default {
        name: "DeliveryOrder",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail, Modal},
        mixins: [lifeHookMixin, itemMixin],
        data() {
            return {
                orderBy : '',
                showExpense: false,
                expense: {
                    items: '',
                    cost: '',
                    currency: ''
                },
                pageSize: 100
            }
        },
        created() {
            this.batchButtons = [{
                label: 'send',
                cls: 'btn-info'
            }]

            this.currencies = config.CURRENCY
            for (let i in this.defaultColumns) {
                if (this.defaultColumns[i].key === 'okm_cleaner__id') {
                    this.defaultColumns[i].options = cleanerList
                } else if (this.defaultColumns[i].key === 'delivery_physical_room__id') {
                    this.defaultColumns[i].ajax = getAjaxConf('PhysicalRoom', 'id', 'physical_room_id')
                }
            }
        },
        methods: {
            // 批量发送delivery order
            batch(selected) {
                if (!selected.length) {
                    return $.toast({
                        heading: 'select something',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    })
                }
                let ids = []
                selected.forEach( item => {
                    ids.push(item.id)
                } )

                swal({
                    title: "Are you sure?",
                    text: "Send delivery order to cleaner's mailbox",
                    icon: "warning",
                    dangerMode: true,
                    buttons: true,
                }).then( (value) => {
                    if (value) {
                        this.tableLoading = true
                        sendDeliveryOrder({
                            delivery_orders: ids
                        }).then(res => {
                            this.tableLoading = false
                            swal("success", "", "success")
                            this.fetch()
                        }).catch(e => {
                            this.tableLoading = false
                        })
                    }
                })
            },
            toShowExpense(props) {
                this.expense.okumasan_order__id = props.item.id
                this.expense.cost = ''
                this.expense.items = ''
                this.expense.currency = ''
                this.expense.reported_by = this.$store.state.user
                this.expense.physical_room_physical_room_id_hook = props.item.physical_room_physical_room_id_hook
                this.expense.order_reservation_code_hook = props.item.heyakun_order_reservation_code_hook
                this.showExpense = true
            },
            addExpense() {
                if (this.expense.cost.trim() &&　this.expense.items.trim() &&
                    this.expense.physical_room_physical_room_id_hook && this.expense.currency) {
                    addModel('OtherExpenses', this.expense).then(() => {
                        swal('success', '', 'success')
                        this.fetch()
                        this.showExpense = false
                    })
                } else {
                    $.toast({
                        heading: 'Fill completely',
                        text: '',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    });
                }
            }
        }
    }
</script>

<style scoped>

</style>